<!--
 * @Description: 异常处理
 * @Author: wangwangwang
 * @Date: 2020-09-21 14:09:06
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2021-12-29 14:52:03
-->
<template>
  <div class="pages_content table">
    <el-container>
      <el-header>
        <breaDcrumb />
      </el-header>
      <el-main>
        <div class="tabtop">
          <div v-for="(item, index) in contractTypelist" :key="index" @click="choose(item.id)">
            <div :class="currenindex == index ? 'active' : 'text'">{{ item.value }}</div>
          </div>
        </div>
        <div style="margin:10px 0px;"></div>
        <div class="card">
          <div v-loading="tableLoading" class="card_info" :style="style">
            <el-table :header-cell-style="{ background: '#f3f6f9' }" :cell-style="{ borderRight: 'none' }" border stripe style="width:100%" :data="tableData" tooltip-effect="dark">
              <template v-for="(item, index2) in table">
                <el-table-column v-if="item.status" :key="index2" :label="item.label" align="center" :width="item.width" show-overflow-tooltip>
                  <template slot-scope="scope">
                    <div v-if="item.label == '附件信息'">
                      <el-button size="mini" class="bottom_one" @click="look1Fun(scope.row)">查看</el-button>
                    </div>
                    <div v-else-if="item.label == '状态'">
                      <span v-if="scope.row.handlerStatus == 1">待处理</span>
                      <span v-if="scope.row.handlerStatus == 2">已处理</span>
                    </div>
                    <div v-else-if="item.label == '处理'">
                      <el-button v-if="ButtonList.findIndex(res=>(res.buttonValue=='TIANXIE'))!==-1" size="mini" class="bottom_one" @click="look2Fun(scope.row)">{{scope.row.handlerStatus == 1?'填写':'查看'}}</el-button>
                    </div>
                    <span v-else>{{ scope.row[item.prop] }}</span>
                  </template>
                </el-table-column>
              </template>
            </el-table>
          </div>
        </div>
      </el-main>
      <div class="card_bottom">
        <div class="card_bottom_left">
          <div class="top_page_totle">总共{{ total }}条</div>
          <el-pagination :current-page.sync="tableParam.page" :page-size="tableParam.pageSize" :page-sizes="[10, 20, 30, 40,50,100,200,500,1000]" layout="prev,pager,sizes,next,jumper" :total="total" @size-change="sizeChange" @current-change="gettableData()"></el-pagination>
        </div>
        <div>
          <el-button size="mini" icon="el-icon-refresh-right" class="bottom_all_two" @click="gettableData">刷新</el-button>
        </div>
      </div>
    </el-container>
    <!-- 添加 -->
    <el-dialog v-dialogDrag :visible.sync="look1Type" width="740px" :close-on-click-modal="false">
      <span slot="title" class="dialog-title">图片/视频信息预览</span>
      <div class="dialoginfo">
        <div class="FZYimgMp4list">
          <div v-for="(v,k) in urlList" :key="k">
            <el-image v-if="$options.filters.imgMp4TypeFun(v.attachmentUrl) == 'img'" :src="'/file/'+v.attachmentUrl" :preview-src-list="srcList" style="width:200px;height:200px;margin:5px 10px;box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.35);" :z-index="10000" @click="srcList=['/file/'+v.attachmentUrl]"></el-image>
            <video v-else width="200" height="200" style="margin:5px 10px;box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.35);" :src="'/file/'+v.attachmentUrl" controls>您的浏览器不支持 HTML5 video 标签。</video>
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button class="bottom_all_two" @click="look1Type =false ">关 闭</el-button>
      </span>
    </el-dialog>
    <!-- 添加 -->
    <el-dialog v-dialogDrag :visible.sync="addDialog" width="600px" :close-on-click-modal="false">
      <span slot="title" class="dialog-title">异常处理办法</span>
      <div class="dialoginfo">
        <el-form ref="reffromDate" :inline="true" :model="formData" label-width="110px">
          <el-form-item prop="structureSize">
            <el-input v-model="formData.handlerMethod" :rows="5" resize="none" style="width: 525px;" type="textarea" placeholder="请详细描述异常处理办法" clearable></el-input>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button class="bottom_all_two" @click="addDialog =false ">取 消</el-button>
        <el-button class="bottom_all" style="margin-left: 24px;" @click="submit()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import mixin from "@/mixins/ICPSmixin.js";
import {
  queryPage,
  attachment_list,
  handler_info,
  save_handler,
} from "@/api/smart/schedul/g.js";
export default {
  mixins: [mixin],
  data() {
    return {
      /*表格增删改查及下载接口*/
      queryPage: queryPage,
      /*表格数据*/
      table: [],
      /*表单页类型，0为无树状，1为有树状，有树状在el-main加上display:flex*/
      pagesType: 0,
      /*添加表单数据*/
      contractTypelist: [
        { value: "前场作业异常", id: 0 },
        { value: "罐车运输异常", id: 1 },
      ],
      currenindex: 0,
      tableA: [
        { label: "异常类型", width: "auto", prop: "typeName", status: true },
        {
          label: "异常描述",
          width: "120",
          prop: "excepDescription",
          status: true,
        },
        {
          label: "附件信息",
          width: "auto",
          prop: "",
          status: true,
        },
        {
          label: "提交人",
          width: "120",
          prop: "createUserName",
          status: true,
        },
        {
          label: "联系电话",
          width: "120",
          prop: "phoneNum",
          status: true,
        },
        {
          label: "提交时间",
          width: "auto",
          prop: "createTime",
          status: true,
        },
        {
          label: "状态",
          width: "auto",
          prop: "handlerStatus",
          status: true,
        },
        { label: "处理", width: "auto", prop: "", status: true },
      ],
      tableB: [
        { label: "车牌号", prop: "carNo", status: true },
        { label: "异常类型", prop: "typeName", status: true },
        {
          label: "异常描述",
          prop: "excepDescription",
          status: true,
        },
        {
          label: "附件信息",
          prop: "",
          status: true,
        },
        {
          label: "提交人",
          prop: "createUserName",
          status: true,
        },
        {
          label: "联系电话",
          prop: "phoneNum",
          status: true,
        },
        {
          label: "提交时间",
          width: "auto",
          prop: "createTime",
          status: true,
        },
        {
          label: "状态",
          prop: "handlerStatus",
          status: true,
        },
        { label: "处理", prop: "", status: true },
      ],
      fromDate: {},
      addDialog: false,
      look1Type: false,
      urlList: [],
      formData: { handlerMethod: "" },
      srcList: [],
    };
  },
  created() {
    this.tableParam.businessType = "type_front";
    this.table = this.tableA;
    this.init();
  },
  methods: {
    look2Fun(e) {
      this.addDialog = true;
      this.exceptionId = e.id;
      handler_info({ exceptionId: this.exceptionId }).then((res) => {
        this.formData.handlerMethod = res.data.handlerMethod;
      });
    },
    submit() {
      let obj = {
        businessExceptionId: this.exceptionId,
      };
      obj = { ...obj, ...this.formData };
      save_handler(obj).then((res) => {
        if (res.code == 1001) {
          this.addDialog = false;
          this.$message({
            message: "操作成功",
            type: "success",
          });
          this.gettableData();
        }
      });
    },
    look1Fun(e) {
      this.look1Type = true;
      this.exceptionId = e.id;
      attachment_list({ exceptionId: this.exceptionId }).then((res) => {
        this.urlList = res.data;
      });
    },
    init() {
      /*重置数据*/
      // this.$data.tableParam = this.$options.data().tableParam;
      if (this.currenindex == 1) {
        this.tableParam.transportStatus = 0;
      }
      this.gettableData();
    },
    choose(num) {
      this.currenindex = num;
      if (this.currenindex == 0) {
        this.table = this.tableA;
        this.tableParam.businessType = "type_front";
      } else {
        this.table = this.tableB;
        this.tableParam.businessType = "type_tank";
      }
      this.gettableData();
    },
    sizeChange(value) {
      this.tableParam.pageSize = value;
      this.gettableData();
    },
  },
  filters: {
    imgMp4TypeFun(d) {
      if (d.includes("jpeg") || d.includes("jpg") || d.includes("png")) {
        return "img";
      } else {
        return "mp4";
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.dialog-pages {
  @include discen_al;
  padding-top: 10px;
}
.dialog-title {
  font-size: 16px;
  font-weight: bold;
  padding-right: 40px;
}
.el-input,
.el-select {
  width: 240px;
}
.table_link {
  margin: 0 10px;
  color: $bg_color;
}

.table_link:hover {
  opacity: 0.8;
}
.tabtop {
  width: 381px;
}
.FZYimgMp4list {
  display: flex;
  flex-wrap: wrap;
}
</style>
